<template>
    <div>
        <el-alert type='error' title='根据微信规则：当一个菜单存在子级菜单时，该菜单除菜单名称外的其他配置将失效。一级菜单最多可设置3个，二级菜单最多可设置5个'></el-alert>
        <el-divider content-position='left'>
            <el-popover
                ref='popover'
                placement="bottom-start"
                width="500"
                trigger="click"
                @hide='resetPopover'>
                <el-form label-width="120px">
                    <el-form-item label='菜单名称'>
                        <el-input v-model='createForm.name'></el-input>
                    </el-form-item>
                    <el-form-item label='菜单类型'>
                        <o-select v-model="createForm.type" code='WECHAT_MENU_TYPE'></o-select>
                    </el-form-item>
                    <el-form-item label='网页链接' v-if="createForm.type == `view`">
                        <el-input v-model='createForm.link_url'></el-input>
                    </el-form-item>
                    <el-form-item label='关键词' v-if="createForm.type == `click`">
                        <el-input v-model='createForm.keyword'></el-input>
                    </el-form-item>
                    <template v-if="createForm.type == `miniprogram`">
                        <el-form-item label='小程序appid'>
                            <el-input v-model='createForm.app_id'></el-input>
                        </el-form-item>
                        <el-form-item label='小程序页面路径'>
                            <el-input v-model='createForm.page_path'></el-input>
                        </el-form-item>
                    </template>
                    
                    <el-form-item>
                        <el-button type='primary' @click='createConfirm'>确认</el-button>
                    </el-form-item>
                </el-form>
                <el-button type='primary' slot='reference' @click='createHandle'>添加菜单</el-button>
            </el-popover>
            <el-button type='success' @click='createMenuRemote'>生成微信菜单</el-button>
            <el-button type='danger' v-if="history.length > 1" @click='backToParent'>返回上一级列表</el-button>
        </el-divider>
        <el-table
            :data="tableData"
            stripe
            border
            :header-cell-style="TABLE_HEADER_CELL_STYLE">
            <el-table-column prop='title' label='菜单名称'>
                <template v-slot='scope'>
                    <edit-table-column v-model='scope.row' edit-key='name' @change='updateHandle(scope.row)'></edit-table-column>
                </template>
            </el-table-column>
            <el-table-column label='菜单类型' prop='type_name'></el-table-column>
            <el-table-column prop='router' label='网页链接'>
                <template v-slot='scope'>
                    <edit-table-column v-model='scope.row' edit-key='link_url' @change='updateHandle(scope.row)'></edit-table-column>
                </template>
            </el-table-column>
            <el-table-column label='小程序appid'>
                <template v-slot='scope'>
                    <edit-table-column v-model='scope.row' edit-key='app_id' @change='updateHandle(scope.row)'></edit-table-column>
                </template>
            </el-table-column>
            <el-table-column label='小程序页面路径'>
                <template v-slot='scope'>
                    <edit-table-column v-model='scope.row' edit-key='page_path' @change='updateHandle(scope.row)'></edit-table-column>
                </template>
            </el-table-column>
            <el-table-column label='关键词'>
                <template v-slot='scope'>
                    <edit-table-column v-model='scope.row' edit-key='keyword' @change='updateHandle(scope.row)'></edit-table-column>
                </template>
            </el-table-column>
            <el-table-column prop='sort' label='排序'>
                <template v-slot='scope'>
                    <edit-table-column v-model='scope.row' edit-key='sort' @change='updateHandle(scope.row)'></edit-table-column>
                </template>
            </el-table-column>
            <el-table-column prop='status' label='状态'>
                <template v-slot='scope'>
                    <el-switch v-model='scope.row.status' @change='updateHandle(scope.row)'></el-switch>
                </template>
            </el-table-column>
            <el-table-column label='操作'>
                <template v-slot='scope'>
                    <el-popconfirm title="确认删除吗？" @confirm='deleteHandle(scope.row)' class="popconfirm">
                        <el-button type='text' slot="reference">删除</el-button>
                    </el-popconfirm>
                    <el-button type='text' @click='viewChildren(scope.row)'>查看下级菜单</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {toast, alert} from '@u'
    export default {
        data () {
            return {
                tableData : [],
                queryForm : {
                    parent_id : 0,
                    page : 1,
                    limit : 100
                },
                total : 0,
                history : [0],//查看下级菜单的历史
                isLoading : false,
                createForm : {
                    name : null, //菜单名称
                    type : null, //菜单类型
                    keyword : null,  //关键词
                    link_url : null,  //菜单链接
                    app_id : null, //小程序应用id
                    page_path : null, //小程序页面路径
                    parent_id : 0, //父级id
                }
            }
        },
        created () {
            this.getTableData();
        },
        methods : {
            getTableData () {
                this.__api.system.wechatMenuList({
                    ...this.queryForm,
                    parent_id : this.history[this.history.length - 1]
                }).then(res => {
                    this.isLoading = false;
                    this.total = res.total;
                    this.tableData = res.data;
                })
            },
            //删除
            deleteHandle (row) {
                this.__api.system.wechatMenuDelete({
                    id : row.id
                }).then(_ => {
                    toast('操作成功');
                    this.getTableData();
                })
            },
            //更新
            updateHandle (row) {
                this.$nextTick(_ => {
                    this.__api.system.wechatMenuUpdate(row).then(_ => {
                        toast('操作成功')
                    })
                })
            },
            //查看下级菜单
            viewChildren (row) {
                this.history = [...this.history, row.id];
                this.queryForm.page = 1;
                this.createForm.parent_id = row.id;
                this.getTableData();
            },
            //返回上一级列表
            backToParent () {
                this.history.pop();
                this.queryForm.page = 1;
                this.createForm.parent_id = this.history[this.history.length - 1];
                this.getTableData();
            },
            //添加下级菜单
            createHandle ({id}) {
                if (id) {
                    this.createForm.parent_id = id;
                }
                // console.log(this.$refs.triggerBtn.$el);
                // this.$refs.triggerBtn.$el.click();
                // this.$resf.triggerBtn.click();
                // this.$refs.popover.doShow();
            },
            //创建确认
            createConfirm () {
                if (!this.createForm.name) {
                    toast('请填写菜单名称', 'error');
                    return;
                }
                if (!this.createForm.type) {
                    toast('请选择菜单类型', 'error');
                    return;
                }
                if (this.createForm.type == 'view' && !this.createForm.link_url) {
                    toast('请填写菜单链接', 'error');
                    return;
                }
                if (this.createForm.type == 'click' && !this.createForm.keyword) {
                    toast('请填写关键词', 'error');
                    return;
                }
                if (this.createForm.type == 'miniprogram' ) {
                    if (!this.createForm.app_id) {
                        toast('请填写小程序appid', 'error');
                        return;
                    }
                    if (!this.createForm.page_path) {
                        toast('请填写小程序页面路径', 'error');
                        return;
                    }
                }
                this.__api.system.wechatMenuCreate(this.createForm).then(_ => {
                    toast('操作成功');
                    this.$refs.popover.doClose();
                    this.getTableData();
                    this.resetPopover();
                })
            },
            //重置相关数据
            resetPopover () {
                this.createForm = {
                    name : null, //菜单名称
                    type : null, //菜单类型
                    keyword : null,  //关键词
                    link_url : null,  //菜单链接
                    app_id : null, //小程序应用id
                    page_path : null, //小程序页面路径
                    parent_id : this.history[this.history.length - 1], //父级id
                }
            },
            //生成远程菜单
            createMenuRemote (){
                if (!this.tableData.length) {
                    toast('未设置任何菜单，生成失败', 'error');
                    return;
                }
                this.__api.system.wechatMenuCreateRemote().then(_ => {
                    toast('操作成功');
                })
            }
        }
    }
</script>

<style>

</style>